<template>
  <a-drawer :title="$t('other.styleDetail')" placement="right" :visible="visible" @close="closeDraw" class="base-color-details" width="800">
    <div class='blue-line'>{{$t('hangManage.baseInfo')}}</div>
    <a-row :gutter="24">
      <a-col :span="18">
        <a-row :gutter="24">
          <a-col :span="8">
            <div>{{$t('basicData.styleNo')}}：</div>
            <div>{{detailInfo.styleNo}}</div>
          </a-col>
          <a-col :span="8">
            <div>{{$t('basicData.styleName')}}：</div>
            <div>{{detailInfo.name}}</div>
          </a-col>
          <a-col :span="8">
            <div>{{$t('menu.basic:producttype')}}：</div>
            <div>{{detailInfo.productType}}</div>
          </a-col>
          <a-col :span="8">
            <div>{{ $t('other.customNo') }}：</div>
            <div class="mb-20">{{detailInfo.customerStyleNo}}</div>
          </a-col>
          <a-col :span="8">
            <div>{{ $t('common.startState') }}：</div>
            <div class="mb-20">{{detailInfo.status == 1 ? $t('common.stop'): $t('common.start')}}</div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="6">
        <div>{{$t('hangManage.img')}}：</div>
        <div class="mb-20">
          <img :src="detailInfo.url" alt="" v-if="detailInfo.url">
        </div>
      </a-col>

    </a-row>
    <div class='blue-line mt-10'>{{$t('basicData.styleInfo')}}</div>
    <a-row :gutter="24">
      <a-col :span="12">
        <div>{{$t('basicData.color')}}：</div>
        <div>
          <div v-if="detailInfo.styleColorList">
            <a-tag v-for="item in detailInfo.styleColorList" :key="item.colorCode">{{item.color}}</a-tag>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div>{{$t('basicData.size')}}：</div>
        <div>
          <div v-if="detailInfo.styleSizeList">
            <a-tag v-for="item in detailInfo.styleSizeList" :key="item.sizeCode">{{item.size}}</a-tag>
          </div>
        </div>
      </a-col>
      <a-col :span="24">
        <div>{{$t('hangManage.proLocation')}}：</div>
        <div class="mb-20">
          <a-table rowKey="id" bordered size="small" :dataSource="tableData" :columns="columns" :pagination="false" />
        </div>
      </a-col>
    </a-row>
    <div class='blue-line mt-10'>{{ $t('other.otherMsg') }}：</div>
    <a-row>
      <a-col :span="12">
        <div>{{$t('common.remark')}}：</div>
        <div class="mb-20">{{detailInfo.remark}}</div>
      </a-col>
    </a-row>
    <div class="footer">
      <a-button @click="closeDraw">{{$t('common.cancel')}}</a-button>
    </div>
  </a-drawer>
</template>
 
<script setup name="designManageDetails">
import { ref } from 'vue'
import i18n from '@/locales/index' 
const { t } = i18n.global
let detailInfo = ref({})
let visible = ref(false)
let tableData = ref([])
const columns = ref([
  {
    title: t('common.sequenceNo'), dataIndex: 'index', key: 'index', align: 'center', width: 60,
    customRender: ({ index }) => {
      return index + 1
    }
  },
  { title: t('other.position'), dataIndex: 'partName', key: 'styleId', align: 'center' },
])
const openDraw = (record) => {
  detailInfo.value = record
  record.productPartNameList && (tableData.value = record.productPartNameList.map(item => ({
    id: Math.random(),
    partName: item
  })))
  visible.value = true
}

const closeDraw = () => {
  detailInfo.value = {}
  tableData.value = []
  visible.value = false
}

defineExpose({
  openDraw
})
</script>